<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中的数据代理</title>
    <!--引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        1、Vue中的数据代理：
            通过vm对象来代理data对象中属性的操作(读/写)
        2、Vue中数据代理的好处
            更加方便的操作data中的数据
        3、基本原理
            通过Object.defineProperty（）把data对象中所有属性添加到vm身上
            为每一个添加到vm上的属性，都指定一个getter/setter
            在getter/setter内部去操作(读写)data中对应的属性。        
     -->

    <!--准备好一个容器-->
    <div id="root">
<h2>学校名称：{{name}}</h2>
<h2>学校名称：{{address}}</h2>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成使用生产版本提示。
   /*  let data = {
        name:'天津大学',
        address:'卫津路95号'
    } */

    // 创建Vue实例
    const vm =  new Vue({
        el:'#root',
        data:{ // vm._data = options.data = data
            name:'天津大学',
            address:'卫津路95号'
        }   
    })
</script>
</html>
